<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
       $(function () {
           var event=new Vue()
           new Vue({
              el:'#app',
               components:{
                  'aaa':{
                      data(){
                          return {
                              aaa: '我是a组件的信息'
                          }
                      },
                      template:'#aaa',
                      methods:{
                          send(){
                              event.$emit("mydata",this.aaa)
                          }
                      }
                  },

                   'bbb':{
                       data(){
                           return {
                               aaa: '我是b组件的信息'
                           }
                       },
                       template:'#bbb',
                       methods:{
                           send(){
                               event.$emit("mydata",this.aaa)
                           }
                       }
                   },

                   'ccc':{
                      data(){
                          return{
                              aaa:''
                          }
                      },
                       template:'#ccc',
                       mounted(){
                          event.$on("mydata",function (data) {
                              this.aaa=data
                          }.bind(this))
                       }
                   }
               }
           })
       })
    </script>
</head>
<body>
    <div id="app">
        <aaa></aaa>
        <br>
        <bbb></bbb>
        <br>
        <ccc></ccc>
    </div>
    <template id="aaa">
        <div>
        <span>我是a组件</span>
        <button type="button" @click="send">传递给c组件</button>
        </div>
    </template>

    <template id="bbb">
        <div>
        <span>我是b组件</span>
        <button type="button"  @click="send">传递给c组件</button>
        </div>
    </template>

    <template id="ccc">
        <div>
        <span>我是c组件</span>
        <span>{{aaa}}</span>
        </div>
    </template>
</body>
</html>
